<template>
  <div class="main app-config-history">
    <section>
      <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
        <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
        </el-table-column>
        <el-table-column align="center" label="配置标题" prop="title" min-width="160">
        </el-table-column>
        <el-table-column align="center" label="配置类型" prop="propertiesTypeName" width="130">
        </el-table-column>
        <el-table-column align="center" label="版本" prop="version" min-width="160">
        </el-table-column>
        <el-table-column align="center" label="消息推送" prop="messagePushStatus" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.messagePushStatus>=0">{{['不推送', '推送所有'][scope.row.messagePushStatus]}}</span>
            <span v-else> - </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createdAt" width="160">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="acm发布时间" prop="acmPublishTime" width="160">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.acmPublishTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="showDetail(scope.row.content)">查看</el-button>
            <el-button v-if="rightsButtons['rollBack']" type="warning" size="mini" plain @click="rollBack(scope.row.propertiesId)">回滚</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>

      <el-dialog title="配置详情" :visible.sync="dialogVisible">
          <vue-json-editor v-model="jsonContent" :show-btns="false" :exapndedOnStart="true" mode="view" :modes="['view']"></vue-json-editor>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </section>
  </div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  name: 'appConfigHistory',
  props: {
    propertiesType: String
  },
  components: {
    vueJsonEditor
  },
  data(){
    return {
      listQuery: {
        propertiesType: this.propertiesType,
        pageIndex: 1,
        pageSize: 20
      },
      listLoading: true,
      listTotal: 0,
      list: [],

      dialogVisible: false,
      jsonContent: {}
    }
  },
  created(){
    this.fetchData()
  },
  methods: {
    fetchData(){
      this.listLoading = true
      this.request({
        url: '/acm/client-properties/history',
        method: 'get',
        params: this.listQuery
      }).then(({data, totalCount}) => {
        this.list = data || []
        this.listTotal = totalCount || 0
        this.listLoading = false
      }).catch(err => {
        console.log(err);
        this.listLoading = false
      });
    },
    handleSizeChange (value) {
      this.listQuery.pageSize = value;
      this.fetchData();
    },
    handleCurrentChange (value) {
      this.listQuery.pageIndex = value;
      this.fetchData();
    },
    showDetail (content) {
      this.jsonContent = JSON.parse(content)
      this.dialogVisible = true
    },
    rollBack (propertiesId) {
      this.$confirm('确定回滚到此配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '回滚中...'
        });
        this.request({
          url: '/acm/client-properties/roll-back',
          method: 'get',
          params: {
            propertiesId
          },
          headers: {
            authorKey: 'appConfigHistoryRollBack'
          }
        }).then(() => {
          this.$message({
            type: 'success',
            message: '回滚配置成功'
          });
          this.fetchData()
          loading.close();
        }).catch(err => {
          console.log(err);
          loading.close();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
    }
  }
}
</script>
<style lang="scss">
.app-config-history .jsoneditor-menu{
  display: none !important;
}
</style>